<template>
  <div id="app">
    <div class="vote-wrapper">
      <h2>请为您最喜欢的人投票</h2>
      <ul>
        <li v-for="(item, index) in list" v-bind:key="index">
          <div class="img">
            <img v-bind:src="item.avatar" v-bind:alt="item.name">
          </div>
          <greeting v-bind:to="item.name" @click="onClick" ><i class="fa fa-heart-o"></i></greeting>
        </li>
      </ul>
    </div>
    <p v-for="(item, index) in records" v-bind:key="index">
      {{item.time}}  - {{item.name}} - {{item.count}}票
    </p> 
  </div>
</template>

<script>
import greeting from './components/greeting.vue'

export default {
  components: {
    greeting
  },
  data() {
    return {
      list: [
        { avatar: require('./assets/jane.png'), name: 'Jane' },
        { avatar: require('./assets/mike.png'), name: 'Mike' },
        { avatar: require('./assets/kate.png'), name: 'Kate' },
        { avatar: require('./assets/tom.png'), name: 'Tom' }
      ],
      records:[]
    }
  },
  methods:{
    onClick(name, count){
      this.records.push({name, count, time: new Date().toLocaleTimeString()});
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}

.vote-wrapper {
  border: 1px solid #999;
  border-radius: 10px;
  width: 600px;
  margin: auto;
}

ul {
  display: flex;
  justify-content: space-around;
  padding: 25px;
  border-top: 1px solid #999;
  margin: 0;
}

li {
  list-style: none;
}

li .img {
  width: 110px;
  border: 1px solid #999;
  border-radius: 10px;
  margin-bottom: 20px;
}

li .img img {
  width: 100%;
}
</style>
